@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

+keyframes(castablePulse)
  from
    @include box-shadow(0px 0px 8px #333)
    color: white
  50%
    @include box-shadow(0px 0px 35px skyblue)
    color: skyblue
  to
    @include box-shadow(0px 0px 8px #333)
    color: white

+keyframes(winnablePulse)
  from
    @include box-shadow(0px 0px 8px #333)
    color: white
  50%
    @include box-shadow(0px 0px 35px #87CEFF)
    color: #87CEFF
  to
    @include box-shadow(0px 0px 8px #333)
    color: white

#cast-button-view
  display: none
  position: absolute
  z-index: 2
  width: 100%
  left: -15px
  right: 15px

  .btn.btn-illustrated
    height: 46px
    font-size: 24px
    line-height: 24px
    width: 45%
    width: -webkit-calc(50% - 10px)
    width: calc(50% - 10px)
    border-style: solid
    border-image: url(/images/level/code_toolbar_run_button_active.png) 14 20 20 20 fill round
    border-width: 7px 10px 10px 10px

    &.full-width
      width: 100%

    &:active
      border-image: url(/images/level/code_toolbar_run_button_active_pressed.png) 14 20 20 20 fill round
      padding: 2px 0 0 2px

    &.submit-button, &.done-button, &.rank-button
      margin-left: 10px
      border-image: url(/images/level/code_toolbar_submit_button_active.png) 14 20 20 20 fill round

      &:active
        border-image: url(/images/level/code_toolbar_submit_button_active_pressed.png) 14 20 20 20 fill round

  .ladder-submission-view
    width: 45%
    width: -webkit-calc(50% - 10px)
    width: calc(50% - 10px)
    display: inline-block

    .btn.btn-illustrated
      width: 100%
      font-size: 18px

    .last-submitted
      float: right
      margin-top: -4px
      width: calc(100% - 20px)
      text-align: center

  .cast-button
    @include opacity(0.77)

    &:hover, &.castable
      @include opacity(1)

  .submit-button > *, .done-button > *
    @include opacity(0.9)

    &:hover
      @include opacity(1)

  &:not(.winnable)

    .btn.btn-illustrated

      &.cast-button.castable
        font-weight: bold
        @include animation(castablePulse 3s infinite)
        border-image: url(/images/level/code_toolbar_run_button_zazz.png) 14 20 20 20 fill round

        &:active
          border-image: url(/images/level/code_toolbar_run_button_zazz_pressed.png) 14 20 20 20 fill round

      &.submit-button
        font-size: 16px

  &.winnable .btn.btn-illustrated.cast-button
    font-size: 16px

  &.winnable.has-seen-winning-replay

    .btn.btn-illustrated
      &.submit-button, &.done-button
        font-weight: bold
        @include animation(winnablePulse 3s infinite)

        border-image: url(/images/level/code_toolbar_submit_button_zazz.png) 14 20 20 20 fill round

        &:active
          border-image: url(/images/level/code_toolbar_submit_button_zazz_pressed.png) 14 20 20 20 fill round

  #stop-cinematic-playback-button
    display: none

  #level-view.junior &
    .btn.btn-illustrated
      width: 100%
      border-image: url(/images/level/code_toolbar_submit_button_active.png) 14 20 20 20 fill round

      &.cast-button
        @include opacity(0.95)

        &:hover, &.castable
          filter: brightness(1.5)

      &:active
        border-image: url(/images/level/code_toolbar_submit_button_active_pressed.png) 14 20 20 20 fill round

      .glyphicon
        font-size: 28px

    &:not(.winnable)
      .btn.btn-illustrated
        &.cast-button.castable
          border-image: url(/images/level/code_toolbar_submit_button_zazz.png) 14 20 20 20 fill round

          &:active
            border-image: url(/images/level/code_toolbar_submit_button_zazz_pressed.png) 14 20 20 20 fill round

  &:not(.text-code) &
    right: -15px

